<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
  </head>

  <body>
    <!-- 骨架 -->
    <table cellspacing="0" cellpadding="3" border="1">
      <tbody id="compileRows"></tbody>
    </table>

    <!-- 模板1 -->
    <script id="compile1" type="text/x-jquery-tmpl">
      {{tmpl 'cached'}}
      <tr><td>${id}</td><td>${name}</td></tr>
    </script>
    <!-- 模板2 -->
    <script id="compile2" type="type/x-jquery-tmpl">
      <tr><td colspan="2">${group}</td></tr>
    </script>

    <script
      type="text/javascript"
      src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"
    ></script>
    <script type="text/javascript" src="./9/jquery.tmpl.min.js"></script>
    <script>
      $(function () {
        // 模拟数据
        var groupUsers = [
          { id: 'think8848', name: 'Joseph Chan', group: 'Administrators' },
          { id: 'aCloud', name: 'Mary Cheung', group: 'Users' },
        ]
        // # compile2编译（缓存)
        $('#compile2').template('cached')
        // compile1 模板直接使用
        $('#compile1').tmpl(groupUsers).appendTo('#compileRows')
      })
    </script>
  </body>
</html>
